<template>
    <div>
        <TMenu></TMenu>
        <div id="big_pos_contain">
            <div class="big_poscontain1">
                <div class="pos_top">
                	<div class="pos_t pos_t_one">我的位置：新增模板职位</div>
                	<div class="pos_t pos_t_two">
                		<span>剩余发布数:<span class="pos_t_one_span">【{{surplus}}】</span>个</span>
	               	    &nbsp; &nbsp;
	               	    <span class="pos_t_one_buy">联系购买</span>
	               	    &nbsp; &nbsp;
	               	    <span class="pos_t_one_say">建议反馈</span>
                	</div>
                </div>
                <div class="div_card">
	               	<Card :bordered="false" class="con_card" >
	               		<h4 class="pos_h4">职位新增</h4>
	               		<div class="pos_card_contain">
	               			<div class="pos_oneidentity ">
			  					<div style="width: 20%;">
			  						<span class="pos_one_spanidentity" ><span class="symbol">*</span>模板名称：&nbsp;</span>
			  					</div>
			  					<div style="width: 80%;">
			  						<i-input type="text" v-model="tem_name" placeholder="请输入" :maxlength="15"></i-input>
			  					</div>
			  				</div>
	               			
	               			<div class="pos_oneidentity ">
			  					<div style="width: 20%;">
			  						<span class="pos_one_spanidentity" >职位名称：&nbsp;</span>
			  					</div>
			  					<div style="width: 80%;">
			  						<i-input type="text" v-model="pos_name" placeholder="请输入" :maxlength="15"></i-input>
			  					</div>
			  				</div>
			  				
			  				<div class="pos_oneidentity ">
			  					<div style="width: 20%;">
			  						<span class="pos_one_spanidentity" >发布城市：&nbsp;</span>
			  					</div>
			  					<div style="width: 80%;">
			  						<i-input type="text" v-model="city_name" placeholder="请选择" :maxlength="15"></i-input>
			  					</div>
			  				</div>
			  				
			  				<div class="pos_oneidentity ">
			  					<div style="width: 20%;">
			  						<span class="pos_one_spanidentity" >职能：&nbsp;</span>
			  					</div>
			  					<div style="width: 80%;">
			  						<i-input type="text" v-model="industy_name" placeholder="请选择" :maxlength="15"></i-input>
			  					</div>
			  				</div>
			  				
			  				<div class="pos_oneidentity ">
			  					<div style="width: 20%;">
			  						<span class="pos_one_spanidentity" >招聘人数：&nbsp;</span>
			  					</div>
			  					<div style="width: 80%; position: relative;">
			  						<i-input type="text" v-model="people_num" placeholder="请选择" :maxlength="15"></i-input>
			  					</div>
			  					<span class="pos_some">0表示若干</span>
			  				</div>
			  				
			  				<div class="pos_oneidentity ">
			  					<div style="width: 20%;">
			  						<span class="pos_one_spanidentity" >薪资：&nbsp;</span>
			  					</div>
			  					<div style="width: 80%;">
			  						<Select v-model="type" class="sselect" placeholder="请选择" @on-change="changeTime(lable)"  style="width: 45%;">
								        <Option v-for="item in Ctype" v-bind:value="item.value"  :key="item.value">{{item.label}}</Option>
								    </Select>
			  						<Select v-model="money" class="sselect" placeholder="请选择" @on-change="changeMoney(lable)" style="width: 45%;">
								        <Option v-for="item in Scale" v-bind:value="item.value"  :key="item.value">{{item.label}}</Option>
								    </Select>
			  					</div>
			  				</div>
			  				
			  				<div class="pos_oneidentity ">
			  					<div style="width: 20%;">
			  						<span class="pos_one_spanidentity" >职位要词：&nbsp;</span>
			  					</div>
			  					<div style="width: 80%;">
			  						<i-input type="text" v-model="crux_name" placeholder="请选择" :maxlength="15"></i-input>
			  					</div>
			  				</div>
			  				
			  				<div class="pos_oneidentity" style="width: 100%;" >
			  					<div style="width: 10%;">
			  						<span class="pos_one_spanidentity" >职位描述：&nbsp;</span>
			  					</div>
			  					<div style="width: 80%;">
			  						<Input @input="descInput" v-model="pos_desc" type="textarea" :rows="8" 
										placeholder="职位描述..."  :maxlength="1000"/>
									<div class="less_num">你还可以输入<span>{{remnant}}/1000</span></div>
			  					</div>
			  				</div>
			  				
			  				<div class="pos_oneidentity " style="margin-top: 160px; width: 100%;" >
			  					<div style="width: 10%;">
			  						<span class="pos_one_spanidentity" >福利：&nbsp;</span>
			  					</div>
			  					<div style="width: 80%;">
			  						<span  v-for="(item, index) in addWelfareli">
										<span class="posSelect" @click="RemoveMse1(index)">{{item.welfare}} X</span>
									</span>
			  						<Button type="primary" class="posbuttom2" @click="EditClick()">编辑</Button>
			  					</div>
	               		    </div>
	               		</div>
	               		
	               		<h4 class="pos_h4">职位要求</h4>
	               		<div class="pos_card_contain">
	               			<div class="pos_oneidentity ">
			  					<div style="width: 20%;">
			  						<span class="pos_one_spanidentity" >工作年限：&nbsp;</span>
			  					</div>
			  					<div style="width: 80%;">
								        <DatePicker type="date" placeholder="选择时间" style="width: 200px"></DatePicker>
			  					</div>
			  				</div>
			  				
			  				<div class="pos_oneidentity ">
			  					<div style="width: 20%;">
			  						<span class="pos_one_spanidentity" >最低学历：&nbsp;</span>
			  					</div>
			  					<div style="width: 80%;">
			  						<Select v-model="sty" class="sselect" placeholder="请选择" @on-change="changeMoney(lable)">
								        <Option v-for="item in Edu" v-bind:value="item.value"  :key="item.value">{{item.label}}</Option>
								    </Select>
			  					</div>
			  				</div>
			  				
			  				<div class="pos_oneidentity ">
			  					<div style="width: 20%;">
			  						<span class="pos_one_spanidentity" >年龄：&nbsp;</span>
			  					</div>
			  					<div style="width: 80%;">
			  						<i-input type="text" v-model="old_age" placeholder="请选择" :maxlength="2" style="width: 48%;"></i-input>-
			  						<i-input type="text" v-model="new_age" placeholder="请选择" :maxlength="2" style="width: 49%;"></i-input>
			  					</div>
			  				</div>
			  				
			  				<div class="pos_oneidentity ">
			  					<div style="width: 20%;">
			  						<span class="pos_one_spanidentity" >语言：&nbsp;</span>
			  					</div>
			  					<div style="width: 80%;">
			  						<Select v-model="spake" class="sselect" placeholder="请选择" @on-change="changeMoney(lable)">
								        <Option v-for="item in Language" v-bind:value="item.value"  :key="item.value">{{item.label}}</Option>
								    </Select>
			  					</div>
			  				</div>
			  				<div class="pos_oneidentity ">
			  					<div style="width: 20%;">
			  						<span class="pos_one_spanidentity" >专业：&nbsp;</span>
			  					</div>
			  					<div style="width: 80%;">
			  						<i-input type="text" v-model="major" placeholder="请选择" :maxlength="15"></i-input>
			  					</div>
			  				</div>
			  				<div class="pos_foot">
			  					<i-button type="primary" style="width: 120px;" @click="InfoSaveClick">保存</i-button>
			  					<i-button type="primary" style="width: 120px;" @click="ReleaseClick">立即发布</i-button>
			  					<i-button type="primary" style="width: 120px;" @click="PreviewClick">预览</i-button>
			  					<i-button type="primary" style="width: 120px;" @click="TemplateClick">保存为职位模板</i-button>
			  				</div>
	               		</div>
	               	</Card>	
               </div>
            </div>
        </div>
	         <Modal v-model="modal1" title="输入公司福利" @on-ok="ok" @on-cancel="cancel">
		        <i-input type="text" v-model="welfare" placeholder="点击确认，一个个添加" :maxlength="10"></i-input>
		    </Modal>
	</div>
</template>

<script>
	import TMenu         from     './components/Menu'
	export default {
    	name: 'Template',
    	components: {
    	    TMenu
		},
        data () {
            return {
            	tem_name:"",
            	major:"",
            	spake:"",
            	old_age:"",
            	new_age:"",
            	modal1: false,
            	welfare:"",
            	surplus:"022",
            	money:"",
            	nature:"全职",
            	type:"",
            	sty:"",
            	pos_name:"",
            	city_name:"",
            	adress_name:"",
            	people_num:"",
            	industy_name:"",
            	crux_name:"",
            	pos_num:"",
            	pos_desc:"",
            	remnant:"1000",
            	addWelfareli: [],
            	welfareli:{},
            	Ctype:[
            	{
                        value: '小时',
                        label: '小时'
                    },
                    {
                        value: '天',
                        label: '天'
                    },
                    {
                        value: '月',
                        label: '月'
                    },
                    {
                        value: '年',
                        label: '年'
                    }
            	],
            	Scale: [
                    {
                        value: '1-49',
                        label: '1-49'
                    },
                    {
                        value: '50-99',
                        label: '50-99'
                    },
                    {
                        value: '100-499',
                        label: '100-499'
                    },
                    {
                        value: '500-999',
                        label: '500-999'
                    },
                    {
                        value: '1000-2000',
                        label: '1000-2000'
                    },
                    {
                        value: '2000-5000',
                        label: '2000-5000'
                    },
                    {
                        value: '5000-10000',
                        label: '5000-10000'
                    },{
                        value: '1W以上',
                        label: '1W以上'
                    }
                ],
                Edu: [
                    {
                        value: '大专以下',
                        label: '大专以下'
                    },
                    {
                        value: '大专',
                        label: '大专'
                    },
                    {
                        value: '本科',
                        label: '本科'
                    },
                    {
                        value: '硕士',
                        label: '硕士'
                    },
                    {
                        value: '博士',
                        label: '博士'
                    }
                ],
                Language: [
                    {
                        value: '英文',
                        label: '英文'
                    },
                    {
                        value: '德语',
                        label: '德语'
                    }
                ]
            }
        },
        methods: {
        	EditClick(){
        		this.modal1 = true;
        	},
        	ok () {
        		var welfare = this.welfare;
        		this.welfareli = {welfare:welfare}
        		this.addWelfareli.push(this.welfareli)
        		
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            },
            RemoveMse1(index){
		      // 用索引删除
		      this.addWelfareli.splice(index, 1);
        	},
        	InfoSaveClick(){
        		console.log(this.addWelfareli)
        	},
        	descInput(){
				 var txtVal = this.pos_desc.length;
				 this.remnant = 1000 - txtVal;
			},
			ReleaseClick(){
				
			},
			PreviewClick(){
				
			},
			TemplateClick(){
				
			}
        }
    }
</script>

<style>
	.posSelect{
		background: #2D8CF0;
	    display: inline-block;
	    padding: 2px 4px;
	    color: #FFFFFF;
	    cursor: pointer;
	    text-align: center;
	    border-radius: 3px;
	    font-size: 14px;
	    margin-right: 10px;
	    height: 32px;
    	line-height: 28px;
	}
	#big_pos_contain{
		width: 100%;
		height: 1200px;
		background: #F4F4F4;
	}
	.big_poscontain1{
		width: 1000px;
		position: relative;
		left: 50%;
		margin-left: -500px;
		top: 15px;
	}
	.div_card{
		width: 1000px;
		margin-top: 10px;
		border-top: 2px;
	}
	.pos_h4{
		color: #2D8CF0;
		border-bottom: 1px solid #CCCCCC;
		padding-bottom: 10px;
	}
	.pos_card_contain{
		padding: 10px 20px;
	}
	.pos_oneidentity{
		height: 45px;
		display: flex;
		line-height: 45px;
		    width: 50%;
	}
	.pos_identity{
		margin-top: 60px;
	}
	.pos_one_spanidentity{
		font-size: 15px;
		position: relative;
	}
	.symbol{
		color: red;
		font-size: 22px;
		position: absolute;
		top: -10px;
    	left: -12px;
	}
	.less_num{
		position: relative;
	    height: 20px;
	    line-height: 20px;
	    float: right;
	}
	.pos_foot{
		width: 100%;
		border-top: 1px solid #CCCCCC;
		margin-top: 25px;
		text-align: center;
		padding-top: 25px;
	}
	.pos_some{
		position: absolute;
    	left: 520px;
    	color: #CCCCCC;
    	font-size: 12px;
	}
	.pos_top{
		display: flex;
		position: relative;
	}
	.pos_t_one{
		
	}
	.pos_t_two{
		position: absolute;
		right: 0px;
	}
	.pos_t_one_span{
		color: red;
		font-weight: 700;
	}
	.pos_t_one_buy,.pos_t_one_say{
		color: #2DB7F5;
	}
	.pos_t_one_buy:hover{
		text-decoration: underline;
		cursor: pointer;
	}
	.pos_t_one_say:hover{
		text-decoration: underline;
		cursor: pointer;
	}
	.con_card{
		border-top: 4px solid #2DB7F5;
	}
</style>